<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-15 10:01:52
 * @Description  : 自定义的选项组
-->
<template>
  <div class="check-group-con flex">
    <WpCheckBox
      class="item"
      v-for="item in options"
      :key="item.label"
      :value="item.value"
      :checks="value"
      @change-value="handleChangeValue"
    >
      <SvgIcon
        :icon="item.icon"
        class="mr-1"
        :color="value.includes(item.value) ? '#badeff' : '#b7b7b7'"
      ></SvgIcon>
      {{ item.label }}
    </WpCheckBox>
  </div>
</template>

<script setup lang="ts">
import type { IndexObj } from '@/types/commom'
import WpCheckBox from './WpCheckBox.vue'
const props = defineProps<{
  options: IndexObj[]
  value: (string | number)[] // 选中的复选款组
}>()

const emits = defineEmits<{
  (e: 'update:value', value: (string | number)[]): void
}>()

const handleChangeValue = (value: string | number) => {
  let newValue: (string | number)[] = []
  if (props.value.includes(value)) {
    // 当前项已经存在，需要移除
    if (value !== props.options[0].value) {
      newValue = props.value.filter((item) => item !== value)
      if (!newValue.length) {
        newValue = [props.options[0].value]
      }
    } else {
      newValue = [value]
    }
  } else {
    // 不存在，需要添加
    if (props.options[0].value === value) {
      newValue = [value]
    } else {
      newValue = props.value.filter((item) => item !== props.options[0].value)
      newValue = newValue.concat([value])
    }
  }

  emits('update:value', newValue)
}
</script>

<style scoped lang="scss">
.check-group-con {
  border-radius: 3px;
  border: 1px solid #eee;

  .item {
    min-width: 100px;
    text-align: center;
  }

  .item:last-child {
    border-radius: 0px 3px 3px 0px;
  }

  .item:first-child {
    border-radius: 3px 0px 0px 3px;
  }
}
</style>
